<template>
<div class=''>
    <div id="app" align="center">
			<div id="head">
				<h1>供货单位</h1>
				<div class="left">
					<hr />
					<h2>供货选择</h2>
					<hr />
					<el-row>
						<el-col :span="16">
							<el-tree :data="menu" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
						</el-col>
					</el-row>
				</div>
				<div class="rigth">
					<div id="one">
						<ul style="display: -webkit-flex;">
							<li>
								<h2>供货单位</h2></li>
							<li>
								<div id="yc" v-if="zt">
									<el-button @click="hh()" id="xy" type="warning">添加项目</el-button>
								</div>

							</li>
						</ul>
						<el-dialog title="添加维修项目" :visible.sync="dialogFormVisible">
							<el-form :model="form">
								<el-row :gutter="10">
									<el-col :span="12">
										<el-form-item label="单位编号" :label-width="formLabelWidth">
											<el-input v-model="form.goodsno" autocomplete="off"></el-input>
										</el-form-item>
									</el-col>
									<el-col :span="12">
										<el-form-item label="单位名称" :label-width="formLabelWidth">
											<el-input v-model="form.goodsname" autocomplete="off"></el-input>
										</el-form-item>
									</el-col>
								</el-row>
								<el-row :gutter="10">
									<el-col :span="10">
										<el-form-item label="联系手机号" :label-width="formLabelWidth">
											<el-input v-model="form.goodsphone" autocomplete="off"></el-input>
										</el-form-item>
									</el-col>
									<el-col :span="10">
										<el-form-item label="邮箱" :label-width="formLabelWidth">
											<el-input v-model="form.goodsemail" autocomplete="off"></el-input>
										</el-form-item>
									</el-col>
								</el-row>
								<el-row :gutter="10">
									<el-col :span="6">
										<el-form-item label="地址：" :label-width="formLabelWidth">
											<el-input v-model="form.goodsaddress" autocomplete="off"></el-input>
										</el-form-item>
									</el-col>
									<el-col :span="6">
										<el-form-item label="联系人：" :label-width="formLabelWidth">
											<el-input v-model="form.linkmanname" autocomplete="off"></el-input>
										</el-form-item>
									</el-col>
									<el-col :span="9">
										<el-form-item label="备注：" :label-width="formLabelWidth">
											<el-input v-model="form.goodsremarks" autocomplete="off"></el-input>
										</el-form-item>
									</el-col>
								</el-row>

							</el-form>
							<div slot="footer" class="dialog-footer">
								<el-button @click="dialogFormVisible = false">取 消</el-button>
								<el-button type="primary" @click="add()">添 加</el-button>
							</div>
						</el-dialog>

					</div>
					<hr />

					<hr />
					<template>
						<el-table v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" :data="list.filter(data => !search || data.goodsno.toLowerCase().includes(search.toLowerCase()))" style="width: 100%">
							<el-table-column label="序号">
								<template slot-scope="temp">
									{{temp.$index+1}}
								</template>
							</el-table-column>
							<el-table-column label="单位编号" prop="goodsno">
							</el-table-column>
							<el-table-column label="单位名称" prop="goodsname">
							</el-table-column>
							<el-table-column label="地址" prop="goodsaddress">
							</el-table-column>
							<el-table-column label="联系人" prop="goodsremarks">
							</el-table-column>
							<el-table-column label="联系手机号" prop="goodsphone">
							</el-table-column>
							<el-table-column label="邮箱" prop="goodsemail">
							</el-table-column>
							<el-table-column label="备注" prop="goodsremarks">
							</el-table-column>
							<el-table-column align="right">
								<template slot="header" slot-scope="scope">
									<el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
								</template>
								<template slot-scope="scope">
									<el-button size="mini" icon="el-icon-edit" type="success" @click="handleEdit(scope.row.goodsid)"></el-button>
									<el-dialog title="修改维修项目" :visible.sync="dialogFormVisible2">
										<el-form :model="form">
											<el-row :gutter="10">
												<el-col :span="12">
													<el-form-item label="单位编号" :label-width="formLabelWidth">
														<el-input v-model="list3.goodsno" autocomplete="off"></el-input>
													</el-form-item>
												</el-col>
												<el-col :span="12">
													<el-form-item label="单位名称" :label-width="formLabelWidth">
														<el-input v-model="list3.goodsname" autocomplete="off"></el-input>
													</el-form-item>
												</el-col>
											</el-row>
											<el-row :gutter="10">
												<el-col :span="6">
													<el-form-item label="地址" :label-width="formLabelWidth">
														<el-input v-model="list3.goodsaddress" autocomplete="off"></el-input>
													</el-form-item>
												</el-col>
												<el-col :span="6">
													<el-form-item label="联系人" :label-width="formLabelWidth">
														<el-input v-model="list3.goodsremarks" autocomplete="off"></el-input>
													</el-form-item>
												</el-col>
												<el-col :span="9">
													<el-form-item label="联系手机号：" :label-width="formLabelWidth">
														<el-input v-model="list3.goodsphone" autocomplete="off"></el-input>
													</el-form-item>
												</el-col>
												<el-col :span="9">
													<el-form-item label="邮箱：" :label-width="formLabelWidth">
														<el-input v-model="list3.goodsemail" autocomplete="off"></el-input>
													</el-form-item>
												</el-col>
												<el-col :span="8">
													<el-form-item label="备注：" :label-width="formLabelWidth">
														<el-input v-model="list3.goodsremarks" autocomplete="off"></el-input>
													</el-form-item>
												</el-col>
											</el-row>

										</el-form>
										<div slot="footer" class="dialog-footer">
											<el-button @click="ss()">取 消</el-button>
											<el-button type="primary" @click="xiugai()">确认 修改</el-button>
										</div>
									</el-dialog>
									<el-button size="mini" icon="el-icon-delete-solid" type="danger" @click="handleDelete(scope.row.goodsid)"></el-button>
								</template>
							</el-table-column>
						</el-table>
					</template>
				</div>
			</div>
		</div>
</div>
</template>

<script>
export default {
data() {
//这里存放数据
return {
menu: [],
				loading: false,
				list: [],
				list3: [{}],
				id: "",
				idd:"",
				value2: "",
				zt: true,
				search: '',
				value: "",
				formLabelWidth: '90px',
				dialogFormVisible: false,
				dialogFormVisible2: false,
				form: [{
					goodsaddress: '',
					goodsemail: "",
					goodsid: "",
					goodsname: "",
					goodsno: "",
					goodsphone: "",
					goodsremarks: "",
					linkmanname: "",
					supplierasid: "",
				}],
				defaultProps: {
					children: 'supplieras',
					label: 'supplierasname'
				}
};
},
//计算属性
computed: {},
//方法集合
methods: {
show1(){
						let _this = this;
						this.$http.get(`http://localhost:8080/api/gh/show1`).then(resp => {
							let rsdata = resp.data;
							//console.info(rsdata);
							_this.menu = rsdata;
							console.info(_this.menu);
						});
					},
					show2(id) {
						let _this = this;
						this.$http.get(`http://localhost:8080/api/gh/show2/${id}`).then(resp => {
							let rsdata = resp.data;
							//console.info(rsdata);
							_this.menu = rsdata;
							console.info(_this.menu);
						});
					},
									ss() {
											this.dialogFormVisible2 = false;
										},
					hh() {
						const loading = this.$loading({
							loading: true,
						});
						setTimeout(() => {
							this.dialogFormVisible = true;
							loading.close();
						}, 10);
						this.form = {
							incometypeid: '',
							serviceitxid: "",
							serviceitemno: "",
							serviceitemname: "",
							siremarks: "",
							cpricesl: "",
							vipprice: "",
						};
						this.value = "";
					},
					
					add() {
						this.form.supplierasid = this.id;
						if (this.form.goodsaddress == null || this.form.goodsemail == null || this.form.goodsname == null || this.form.goodsno == null || this.form.goodsphone == null || this.form.linkmanname == null) {
							alert("请填写完整信息");
							return "";
						}
						if (this.form.goodsremarks == null) {
							alert("请填写完整信息");
							return "";
						}
						this.$http.post('http://127.0.0.1:8080/api/gh/add', this.form).then(resp => {
							if (resp.data.code == "200") {
								alert("新增成功");
								this.ab(this.id);
								const loading = this.$loading({
									loading: true,
								});
								setTimeout(() => {
									this.form = {
										goodsaddress: '',
										goodsemail: "",
										goodsid: "",
										goodsname: "",
										goodsno: "",
										goodsphone: "",
										goodsremarks: "",
										linkmanname: "",
									};
									loading.close();
								}, 350);
							}
						});
						this.dialogFormVisible = false;
					},
					handleNodeClick(data) {
						let _this = this;
						_this.idd = data.parentid;
						_this.id = data.supplierasid;
						_this.tt();
						_this.ab(_this.id);
						//						console.log(data);
					},

					ab(id) {
						let _this = this;
						if (id != null) {
							const loading = this.$loading({
								loading: true,
							});
							setTimeout(() => {
								loading.close();
							}, 350);
							this.$http.get(`http://localhost:8080/api/gh/show2/${id}`).then(resp => {
								let rsdata = resp.data;
								//console.info(rsdata);
								_this.list = rsdata;
							});
						}
					},
										handleEdit(id) {
											this.dialogFormVisible2 = true;
											this.$http.get(`http://localhost:8080/api/gh/show3/${id}`).then(resp => {
												let rsdata = resp.data;
												//console.info(rsdata);
												this.list3 = rsdata;
											});
										},
										xiugai() {
											let _this = this;
												this.$http.put(`http://127.0.0.1:8080/api/gh/update2/${this.list3.goodsid}`, this.list3).then(function(resp) {
													if (resp.data.code == "200") {
														alert("修改品牌成功！")
														_this.dialogFormVisible2 = false;
														_this.ab(_this.id);
													}
												});
										},
										tt(){
											if(this.idd==0){
												this.zt=false;
											}else{
												this.zt=true;
											}
										},
					handleDelete(id) {
						let _this = this;
						if (window.confirm('是否删除该品牌?')) {
							this.$http.delete(`http://127.0.0.1:8080/api/gh/del/${id}`).then(resp => {
								if (resp.data.code == "200") {
									_this.ab(_this.id);
									alert('删除成功');
								}
							});
						}
					}
},
//挂载完成（可以访问DOM元素）
mounted() {
this.tt();
				this.show1();
},
//监控data中的数据变化
watch: {

}
}
</script>
<style  scoped>
/*@import url(); 引入公共css类*/
#head {
			margin: 5px;
			border: 1px solid black;
			width: 1500px;
		}
		
		.left {
			float: left;
			width: 15%;
			height: 600px;
			border: 1px solid black;
		}
		
		.rigth {
			border: 1px solid black;
			width: 84%;
			height: 600px;
			float: right;
		}
		
		#one {
			width: 300px;
			height: 100px;
		}
		
		li {
			display: none;
			display: inline;
		}
		
		#xy {
			margin-top: 20px;
		}
</style>